<template>
    <div>
        <Form inline>
            <FormItem>
                <Select v-model="params.type" placeholder="查询条件">
                    <Option value="">全部</Option>
                    <Option value="1">邮箱</Option>
                    <Option value="2">公司名</Option>
                    <Option value="3">网址</Option>
                </Select>
            </FormItem>
            <FormItem>
                <Input v-model="params.mobile" placeholder="选择查询条件"/>
            </FormItem>
            <FormItem>
                <Button type="success" @click="search">搜索</Button>
            </FormItem>
        </Form>
        <wl-resource-table @addAction="modalAdd" @editAction="edit" :params="params" ref="wlTable"></wl-resource-table>
        <wl-resource-form
                :show="modelFormShow"
                :options="filitionOption"
                :filtrationFun="fun"
                @result="formResult"
                @cancelShow="cancelShow">
        </wl-resource-form>
    </div>
</template>

<script>
import WlResourceTable from './wl-resource-table/'
import WlResourceForm from '@/components/wl-resource-form/'
import { checkAcount } from '@/api/user'

export default {
  components: { WlResourceForm, WlResourceTable },
  data () {
    const validateAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('登录账号必须填写'))
      }
      // 模拟异步验证效果
      checkAcount(value).then(ret => {
        if (ret.data.errcode === 1001) {
          callback()
        } else {
          callback(new Error('该账号已经存在'))
        }
      })
    }
    return {
      params: {
        login_name: ''
      },
      modelFormShow: false,
      fun: (data) => {
        if (this.type === 'add') {
          return data
        } else {
          return this.$common.xeUtils.pick(data, ['id', 'company_name', 'industry', 'address', 'main_product'])
        }
      },
      type: 'add',
      options: {
        // 表单属性 非必需
        formProps: {
          'label-width': 80
        },
        // 表单数据 必需
        formData: {
          id: '',
          login_name: '',
          password: '',
          company_name: '',
          industry: '',
          address: '',
          main_product: ''
        },
        // 表单项组件数据 必需
        formItem: [
          {
            type: 'input',
            key: 'login_name',
            label: '登录账号',
            props: {
              placeholder: '请输入登录的账号...'
            },
            rules: {
              validator: validateAge, trigger: 'blur'
            }
          },
          {
            type: 'input',
            label: '输入密码',
            key: 'password',
            props: {
              placeholder: ''
            },
            rules: {
              required: true,
              trigger: 'blur',
              message: '密码必须填写'
            }
          }, {
            type: 'input',
            label: '公司名称',
            key: 'company_name',
            props: {
              placeholder: ''
            },
            rules: {
              required: true,
              trigger: 'blur',
              message: '请输入公司名称'
            }
          }, {
            type: 'input',
            label: '行业',
            key: 'industry',
            props: {
              placeholder: ''
            }
          }, {
            type: 'input',
            label: '公司地址',
            key: 'address',
            props: {
              placeholder: ''
            }
          }, {
            type: 'input',
            label: '主营产品',
            key: 'main_product',
            props: {
              placeholder: ''
            }
          }
        ]
      }
    }
  },
  computed: {
    filitionOption () {
      if (this.type === 'add') {
        return this.options
      } else {
        let nowOption = JSON.parse(JSON.stringify(this.options))
        let data = []
        nowOption.formItem.forEach(item => {
          if (item.key !== 'password' && item.key !== 'login_name') {
            data.push(item)
          }
        })
        nowOption.formItem = data
        return nowOption
      }
    }
  },
  mounted () {
  },
  methods: {
    search () {
      this.$refs.wlTable.getList()
    },
    formResult (data) {
      if (data.errcode === 1001) {
        this.type === 'add' ? this.$Message.success('新增成功！') : this.$Message.success('编辑成功！')
        this.modelFormShow = false
        this.$refs.wlTable.getList()
      } else {
        this.$Message.success('增加失败！')
      }
    },
    edit (row) {
      this.type = 'edit'
      this.options.formData = row
      this.modelFormShow = true
    },
    modalAdd () {
      this.type = 'add'
      this.options.formData = {
        id: '',
        login_name: '',
        password: '',
        company_name: '',
        industry: '',
        address: '',
        main_product: ''
      }
      this.modelFormShow = true
    },
    cancelShow () {
      this.modelFormShow = false
    }
  }
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .page {
        text-align: right;
        margin-top: 10px;
    }

    .input {
        width: 280px;
    }

</style>
